<template>
  <div>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      width="500px"
      :showCancel="false"
      @close="dialogConfig.show = false"
    >
      <el-form
        :model="formData"
        ref="formDataRef"
        label-width="80px"
        @submit.prevent
      >
        <!--input输入-->
        <el-form-item label="昵称">
          {{ formData.nickName }}
        </el-form-item>
        <el-form-item label="头像" prop="">
          <Avatarupload v-model="formData.avatar"></Avatarupload>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import Avatarupload from '@/components/AvatarUpload.vue'
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import { UpdateAvatar } from "@/api/account";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const emit = defineEmits();
const formData = ref({});
const formDataRef = ref();

const show = (data)=>{
    formData.value = Object.assign({},data);
    formData.value.avatar = {userId:data.userId}
    dialogConfig.value.show = true;
}
// 暴露出去 要从外层组件获取数据
defineExpose({show})
const dialogConfig = ref({
  show: false,
  title: "修改头像",
  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        submitForm();
      },
    },
  ],
});
// 修改头像
const submitForm =async ()=>{
    // 如果不是一个文件
    if(!formData.value.avatar instanceof File){
        dialogConfig.value.show = false
        return;
    }
    const params = {
        avatar:formData.value.avatar
    }
    let result = await UpdateAvatar(params)
    if(!result){
        return;
    }
    dialogConfig.value.show = false;
    const cookieUserInfo = proxy.VueCookies.get("userInfo")
    
    delete cookieUserInfo.avatar;
    proxy.VueCookies.set("userInfo",cookieUserInfo,0);
    // 暴露出去  提示外部组件 框架framework 头像更新
    emit("updateAvatarFunOut");
}
</script>

<style lang="scss" scoped>
</style>